// import path from 'path'
// import HtmlPlugin from 'html-webpack-plugin'
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const CopyPlugin = require("copy-webpack-plugin")
/* __dirname: 当前文件所在文件夹的绝对路径 */

const srcDir = 'src07-router'

module.exports = {

  // 模式
  // mode: 'production',

  // 入口
  entry: {
    app: `./${srcDir}/main.js`
  },

  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'), // 指定所有打包文件的基础路径(绝对的)
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/' // 引入打包的文件时路径以/开头
  },

  // 模块加载器
  module: {
    rules: [
      // 处理vue
      {
        test: /\.vue$/,
        include: path.resolve(__dirname, srcDir),
        loader: 'vue-loader'
      },

      // es6==>es5
      {
        test: /\.js$/,
        include: path.resolve(__dirname, srcDir),
        use: 'babel-loader'
      },
      // css
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'], // 多个loader从右到左处理
      },
      // image/font
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?|.ttf|.woff$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'img/[name].[contenthash:8].[ext]' // 相对于output.path
        }
      }
    ]
  },

  // 插件
  plugins: [
    // 拷贝静态资源的
    new CopyPlugin({
      patterns: [
        { from: "public/css", to: "css" }
      ]
    }),

    // 处理vue
    new VueLoaderPlugin(),

    // 处理html
    new HtmlPlugin({
      template: './public/index.html',
      filename: 'index.html'
    })
  ],
  
  // 开发服务器配置
  devServer: {
    open: true, // 自动打开浏览器
    stats: 'errors-only', // 只显示错误日志信息
    proxy: {
      // 处理以/api开头路径的请求
      // '/api': 'http://localhost:4000'
      '/api': {
        target: 'http://localhost:4000', // 转发的目标地址
        pathRewrite: {
          '^/api' : ''  // 转发请求时去除路径前面的/api
        },
        changeOrigin: true, // 支持跨域
      }
    },
    historyApiFallback: true  // 任意的 404 响应都被替代为 index.html
  },

  // 开启sourcemap调试
  devtool: 'cheap-module-eval-source-map',

  // 引入模块的解析
  resolve: {
    extensions: ['.js', '.vue', '.json'], // 可以省略的后缀名
    alias: { // 路径别名(简写方式)
      '@': path.resolve(__dirname, srcDir)
    }
  },
}